<template>
    <div class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center flex-col">
        <CoreBackGroundColorComponent />
        <CoreBarNavightionComponent />
        <div class="fixed w-full">
            <div
                class="bg-white mx-5 flex fixed left-0 right-0 justify-center top-40 bottom-52 rounded-3xl border border-black shadow-2xl">
                <div class="flex absolute top-0 justify-center text-black w-full text-center ml-5 mr-5 text-1xl font-bold bg-slate-300 items-center border border-black shadow-xl rounded-br-xl rounded-bl-xl rounded-tr-2xl rounded-tl-2xl"
                    style="height:20%">
                    <h1 class="text-black" v-text='(testStartStore.item?.title || "加载失败")' />
                </div>
                <div class="mt-3 flex absolute top-32 w-full justify-center flex-col">
                    <p v-for="item in testStartStore.item?.context.split(/[!。]/)" v-text="item + '。'"
                        class="text-left mt-0 mb-2 ml-3 mr-3 p-0 indent-8 text-lg" />
                </div>
                <div class="flex absolute bottom-5 w-full justify-center items-center">
                    <van-button type="primary" @click="testStartStore.getNext" block round
                        v-text="testStartStore.item?.buttonText || '加载错误'" style="width: 95%" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const testStartStore = useTestStartStore();

onBeforeMount(() => {
    testStartStore.initStore();
});
</script>

<style lang="scss" scoped></style>